<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加卡密</title>
    <link rel="stylesheet" href="public/layui/css/layui.css">
    <style>
        body {
            padding: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .form-container {
            max-width: 100%;
            margin: 0 auto;
        }
        
        /* 移动端样式优化 */
        @media screen and (max-width: 768px) {
            .layui-form-item {
                margin-bottom: 15px;
            }
            
            /* 标签和输入框垂直排列 */
            .layui-form-label {
                float: none;
                width: 100% !important;
                padding: 9px 0 !important;
                text-align: left !important;
            }
            
            /* 输入框占满宽度 */
            .layui-input-inline {
                float: none;
                width: 100% !important;
                margin: 0 !important;
            }
            
            /* 确保select和input显示正常 */
            .layui-input, 
            .layui-select {
                width: 100% !important;
            }
            
            /* 提交按钮样式 */
            .submit-btn {
                width: 100%;
            }
        }
    </style>
</head>

<body>
    <div class="form-container">
        <form class="layui-form" lay-filter="edit" action="">
            <!-- 卡密类型 -->
            <div class="layui-form-item">
                <label class="layui-form-label">卡密类型</label>
                <div class="layui-input-inline">
                    <select name="type" lay-verify="required">
                        <option value="">请选择卡密类型</option>
                        <option value="2">会员卡密</option>
                        <option value="3">积分卡密</option>
                    </select>
                </div>
            </div>

            <!-- 生成数量 -->
            <div class="layui-form-item">
                <label class="layui-form-label">生成数量</label>
                <div class="layui-input-inline">
                    <input type="number" lay-verify="required" lay-affix="number" name="num" 
                           placeholder="生成数量" step="10" min="0" class="layui-input">
                </div>
            </div>

            <!-- 积分 -->
            <div class="layui-form-item">
                <label class="layui-form-label">积分</label>
                <div class="layui-input-inline">
                    <input type="number" lay-verify="required" lay-affix="number" name="score" 
                           placeholder="积分" step="10" min="0" class="layui-input" value="0">
                </div>
            </div>

            <!-- 会员数量 -->
            <div class="layui-form-item">
                <label class="layui-form-label">会员数量</label>
                <div class="layui-input-inline">
                    <input type="number" lay-affix="number" name="vip_count" 
                           placeholder="生成数量" step="1" min="0" class="layui-input" value="1">
                </div>
            </div>

            <!-- 会员时长 -->
            <div class="layui-form-item">
                <label class="layui-form-label">会员时长</label>
                <div class="layui-input-inline">
                    <select name="vip_type" lay-verify="required">
                        <option value="">请选择会员时长</option>
                        <option value="0">时</option>
                        <option value="1" selected>天</option>
                        <option value="2">月</option>
                        <option value="3">年</option>
                    </select>
                </div>
            </div>

            <!-- 提交按钮 -->
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <button class="layui-btn submit-btn" lay-submit lay-filter="add">添加</button>
                </div>
            </div>
        </form>
    </div>

    <script src="./public/layui/layui.js"></script>
    <script>
        layui.use(function () {
            var form = layui.form;
            var $ = layui.$;
            
            // 表单提交处理
            form.on('submit(add)', function (data) {
                var field = data.field;
                $.post('?p=admin&c=fake&a=doAdd', field, function(res) {
                    if (res.code == 200) {
                        layer.msg('添加成功');
                    } else {
                        layer.msg(res.msg);
                    }
                });
                return false;
            });
            
            // 确保表单渲染完成
            form.render();
        });
    </script>
</body>

</html>